<template>
  <div
    id="gauge-chart"
    :style="{ height: '380px' }"
  />
</template>

<script>
  import { ChartResizeMixin } from '@/mixins/ChartResizeMixin'
  import * as echarts from 'echarts';
  export default {
    name: 'Gauge',
    mixins: [ChartResizeMixin],
    props: {
      loadVal: {
        type: Number,
        default: 0,
      },
      title: {
        type: String,
        default: undefined,
      }
    },
    watch: {
      loadVal() {
        this.drawGaugeChart()
      }
    },
    mounted() {
      this.drawGaugeChart()
    },
    methods: {
      drawGaugeChart() {
        const chartDom = document.getElementById('gauge-chart')
        const echartInstance = echarts.getInstanceByDom(chartDom)
        if (!echartInstance) {
          this.chart = echarts.init(chartDom)
        }
        const option = {
          title: {
            text: this.title,
            left: 'center',
            textStyle: {
              color: '#6B6B6B',
              fontWeight: 600,
              fontSize: 14
            }
          },
          tooltip: {
            formatter: '{a} <br/>{c} {b}'
          },
          toolbox: {
            show: false,
          },
          series: [{
            type: 'gauge',
            center: ["50%", "60%"],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 300,
            splitNumber: 12,
            itemStyle: {
              color: '#FFAB91'
            },
            progress: {
              show: true,
              width: 15
            },
            pointer: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                width: 15
              }
            },
            axisTick: {
              distance: -28,
              splitNumber: 5,
              lineStyle: {
                width: 2,
                color: '#999'
              }
            },
            splitLine: {
              distance: -36,
              length: 12,
              lineStyle: {
                width: 3,
                color: '#999'
              }
            },
            axisLabel: {
              distance: -26,
              color: '#999',
              fontSize: 16
            },
            anchor: {
              show: false
            },
            title: {
              show: false
            },
            detail: {
              valueAnimation: true,
              width: '50%',
              lineHeight: 46,
              height: 15,
              borderRadius: 8,
              offsetCenter: [0, '-15%'],
              fontSize: 32,
              fontWeight: 'bolder',
              formatter: '{value} KW',
              color: 'inherit'
            },
            data: [{
              value: this.loadVal
            }]
          },
          {
            type: 'gauge',
            center: ["50%", "60%"],
            startAngle: 200,
            endAngle: -20,
            min: 0,
            max: 300,
            itemStyle: {
              color: '#FD7347',
            },
            progress: {
              show: true,
              width: 5
            },
            pointer: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            detail: {
              show: false
            },
            data: [{
              value: this.loadVal
            }]

          }],
        }
        this.chart.setOption(option, true)
      },
    },
  }
</script>